import axios from 'axios';
import React, { useState, useEffect } from 'react';
import {
  Card,
  Sticky,
  ProductCard,
  SubmitBar,
  Checkbox,
  SwipeCell,
  Button,
} from 'react-vant';

import { ArrowLeft } from '@react-vant/icons';
import { history } from 'umi';
import '../index.css';

export default function Cartdata() {
  const [list, setlist] = useState([]);
  const getlist = async () => {
    const { data } = await axios.get('http://localhost:3000/yrt/cartdata');
    console.log(data, 'PPPPPPPPP');
    setlist(data.date);
  };
  useEffect(() => {
    getlist();
  }, []);
  const fan = () => {
    history.push('/index/dui');
  };

  const delone = async (id) => {
    await axios.get('http://localhost:3000/yrt/del/' + id);
    getlist();
  };
  return (
    <div style={{ background: '#09e7fb12' }}>
      {list.length === 0 ? (
        '请添加商品'
      ) : (
        <div>
          <div className="duishou">
            <Sticky>
              <div
                style={{ background: '#2bcddd', lineHeight: '58px' }}
                onClick={fan}
              >
                <span style={{ marginRight: '15px' }}>
                  <ArrowLeft fontSize={'25px'} color={'#fff'} />
                </span>
                <h1 style={{ color: '#fff', display: 'inline-block' }}>
                  购物车
                </h1>
              </div>
            </Sticky>
          </div>
          <div className="nrss">
            <Card.Body>
              {list.map((item) => (
                <div
                  key={item._id}
                  className="aaabbb"
                  style={{
                    marginBottom: '10px',
                    background: '#fff',
                    borderRadius: '5px',
                  }}
                >
                  <SwipeCell
                    rightAction={
                      <Button
                        style={{ height: '100%' }}
                        square
                        type="danger"
                        onClick={() => delone(item._id)}
                      >
                        删除
                      </Button>
                    }
                  >
                    <ProductCard
                      num="2"
                      price={item.jin}
                      desc="描述信息"
                      title="商品名称"
                      thumb={item.img}
                    />
                  </SwipeCell>
                </div>
              ))}
            </Card.Body>
          </div>
          <div>
            <SubmitBar price="3050" buttonText="提交订单">
              <Checkbox>全选</Checkbox>
            </SubmitBar>
          </div>
        </div>
      )}
    </div>
  );
}
